<template>
  <div class="admin-dashboard">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/admin-dashboard">
            <el-icon><Monitor /></el-icon>
            <span>控制面板</span>
          </el-menu-item>
          <el-menu-item index="/student-management">
            <el-icon><School /></el-icon>
            <span>学员管理</span>
          </el-menu-item>
          <el-menu-item index="/coach-management">
            <el-icon><UserFilled /></el-icon>
            <span>教练管理</span>
          </el-menu-item>
          <el-menu-item index="/addCourse">
            <el-icon><Document /></el-icon>
            <span>添加课程</span>
          </el-menu-item>
          <el-menu-item index="/data-statistics">
            <el-icon><PieChart /></el-icon>
            <span>数据统计</span>
          </el-menu-item>
          <el-menu-item index="/system-settings">
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <span class="el-dropdown-link">
              管理员
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>

        <el-main>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>学员总数</span>
                  </div>
                </template>
                <div class="statistic">
                  <el-statistic :value="studentCount">
                    <template #suffix>
                      <span class="statistic-unit">人</span>
                    </template>
                  </el-statistic>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>教练总数</span>
                  </div>
                </template>
                <div class="statistic">
                  <el-statistic :value="coachCount">
                    <template #suffix>
                      <span class="statistic-unit">人</span>
                    </template>
                  </el-statistic>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>课程总数</span>
                  </div>
                </template>
                <div class="statistic">
                  <el-statistic :value="courseCount">
                    <template #suffix>
                      <span class="statistic-unit">个</span>
                    </template>
                  </el-statistic>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>考试通过率</span>
                  </div>
                </template>
                <div class="statistic">
                  <el-statistic :value="passRate" :precision="2">
                    <template #suffix>
                      <span class="statistic-unit">%</span>
                    </template>
                  </el-statistic>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="12">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>最近注册学员</span>
                  </div>
                </template>
                <el-table :data="recentStudents" style="width: 100%">
                  <el-table-column prop="studentName" label="姓名" width="120" />
                  <el-table-column prop="registerTime" label="注册时间" width="180" />
                  <el-table-column prop="phone" label="联系电话" />
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>科目通过情况</span>
                  </div>
                </template>
                <el-table :data="examPassData" style="width: 100%">
                  <el-table-column prop="subject" label="科目" width="120" />
                  <el-table-column prop="passRate" label="通过率">
                    <template #default="scope">
                      <el-progress :percentage="scope.row.passRate" :color="getProgressColor(scope.row.passRate)" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowDown, Monitor, School, Document, PieChart, Setting, UserFilled } from '@element-plus/icons-vue'

export default {
  name: 'AdminDashboard',
  components: {
    ArrowDown,
    Monitor,
    School,
    UserFilled,
    Document,
    PieChart,
    Setting
  },
  setup() {
    const router = useRouter()
    const studentCount = ref(120)
    const coachCount = ref(15)
    const courseCount = ref(8)
    const passRate = ref(85.6)

    const recentStudents = ref([
      { studentName: '张三', registerTime: '2025-05-30 10:23:45', phone: '13800138001' },
      { studentName: '李四', registerTime: '2025-05-29 14:12:36', phone: '13800138002' },
      { studentName: '王五', registerTime: '2025-05-28 09:45:21', phone: '13800138003' },
      { studentName: '赵六', registerTime: '2025-05-27 16:34:12', phone: '13800138004' },
      { studentName: '小一', registerTime: '2025-05-26 11:23:45', phone: '13181579079' }
    ])

    const examPassData = ref([
      { subject: '科目一', passRate: 85 },
      { subject: '科目二', passRate: 70 },
      { subject: '科目三', passRate: 65 },
      { subject: '科目四', passRate: 90 }
    ])

    // 根据通过率返回不同颜色
    const getProgressColor = (rate) => {
      if (rate < 60) return '#F56C6C' // 红色
      if (rate < 80) return '#E6A23C' // 黄色
      return '#67C23A' // 绿色
    }

    const handleLogout = () => {
      sessionStorage.removeItem('account')
      localStorage.removeItem('token')
      ElMessage.success('退出登录成功')
      router.push('/login')
    }

    // 处理菜单选择
    const handleMenuSelect = (index) => {
      router.push(index)
    }

    return {
      studentCount,
      coachCount,
      courseCount,
      passRate,
      recentStudents,
      examPassData,
      getProgressColor,
      handleLogout,
      handleMenuSelect
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  height: 100vh;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  background-color: #304156;
}

.el-menu {
  border-right: none;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.statistic-unit {
  margin-left: 5px;
  font-size: 16px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  display: flex;
  align-items: center;
}
</style>
